<template>
	<el-dialog
		:title="type == 'add' ? '添加角色信息' : '修改角色信息'"
		v-model="state.visible"
		width="400px"
	>
		<el-form :model="state.ruleForm" :rules="state.rules" ref="formRef" label-width="100px" class="good-form">
			<el-form-item label="角色名" prop="roleName">
				<el-input type="text" v-model="state.ruleForm.roleName"></el-input>
			</el-form-item>
			<el-form-item label="权限字符" prop="roleChar">
				<a>role:</a>
				<el-input type="text" v-model="state.ruleForm.roleChar"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
      <span class="dialog-footer">
        <el-button @click="state.visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
		</template>
	</el-dialog>
</template>

<script setup>
import {reactive, ref} from 'vue';
import {addOneRole, roleDetail, roleUpdate} from '@/api/role';
import {localGet} from '@/utils';
import {ElMessage} from 'element-plus';
import md5 from 'js-md5';

const props = defineProps({
  type: String,
  reload: Function
});

const formRef = ref(null);
const state = reactive({
  token: localGet('token') || '',
  visible: false,
  ruleForm: {
    roleId: '',
    roleName: '',
    roleChar: '',
    createTime: ''
  },
  rules: {
    roleName: [
      {required: 'true', message: '角色名不能为空', trigger: ['change']}
    ],
    roleChar: [
      {required: 'true', message: '用户字符不能为空', trigger: ['change']}
    ]
  },
  id: ''
});
// 获取详情
const getDetail = async (id) => {
  console.log('详情', id);
  await roleDetail(id).then(res => {
    console.log('详情', res.data.data.roleName);
    state.ruleForm = {
      roleId: res.data.data.roleId,
      roleName: res.data.data.roleName,
      // 过滤掉前缀
      roleChar: res.data.data.roleChar.replace(/^role:/, ''),
      createTime: res.data.data.createTime
    };
  });
};
// 上传图片
// 开启弹窗
const open = (row) => {
  state.visible = true;
  console.log('当前行', row);
  console.log('当前操作', props.type);
  if (row) {
    console.log('载入行数据，{}', row);
    getDetail(row.roleId);
  } else {
    state.ruleForm = {
      roleId: '',
      roleName: '',
      roleChar: '',
      createTime: ''
    };
  }
};
// 关闭弹窗
const close = () => {
  state.visible = false;
};
const submitForm = () => {
  console.log(formRef.value.validate);
  console.log('验证通过--》');
  state.ruleForm.roleChar = 'role:'+ state.ruleForm.roleChar;
  formRef.value.validate(async (valid) => {
    if (valid) {
      console.log('添加操作');
      if (props.type == 'add') {
        await addOneRole(
          state.ruleForm
        ).then(() => {
          ElMessage.success('添加成功');
          state.visible = false;
          if (props.reload) props.reload();
        });
      } else {
        await roleUpdate(
          state.ruleForm
        ).then(() => {
          ElMessage.success('修改成功');
          state.visible = false;
          if (props.reload) props.reload();
        });
      }
    }
  });
};
defineExpose({open, close});
</script>

<style scoped>
.avatar-uploader {
    width: 100px;
    height: 100px;
    color: #ddd;
    font-size: 30px;
}

.avatar-uploader >>> .el-upload {
    width: 100%;
    text-align: center;
}

.avatar-uploader-icon {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #e9e9e9;
    padding: 32px 17px;
}
</style>
